<template class="task-template">
  <section id="dialogs-section" class="section js-section u-category-native-ui">
    <header class="section-header">
      <div class="section-wrapper">
        <h1>
          <svg class="section-icon"><use xlink:href="assets/img/icons.svg#icon-native-ui"></use></svg>
          使用原生窗口
        </h1>
        <h3>Electron 中的 <code>dialog</code> 模块可用来调起原生系统中的窗口，完成打开文件，打开目录，保存文件以及展示信息的功能.</h3>

        <p>这是一个主进程子模块，基于此，调起本地服务会非常高效，而不像在渲染进程中，需要中断当前的渲染.</p>

        <p>详情查看 <a href="http://electron.atom.io/docs/api/dialog/"> dialog 在线文档<span class="u-visible-to-screen-reader">(将会在浏览器中打开)</span></a></p>
      </div>
    </header>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="open-file-demo-toggle" class="js-container-target demo-toggle-button">打开一个文件或者目录
          <div class="demo-meta u-avoid-clicks">支持系统: Win, OS X, Linux <span class="demo-meta-divider">|</span> 进程: Main</div>
        </button>
        <div class="demo-box">
          <div class="demo-controls">
            <button class="demo-button" id="select-directory">点我看效果</button>
            <span class="demo-response" id="selected-file"></span>
          </div>
          <p>在这个 🌰 中，使用了 <code>ipc</code> 模块来从渲染进程向主进程发起打开文件的请求. 如果在 dialog 模块中选择了文件，主进程负责将信息通知给渲染进程.</p>
          <h5>渲染进程</h5>
          <pre><code data-path="renderer-process/native-ui/dialogs/open-file.js"></pre></code>
          <h5>主进程</h5>
          <pre><code data-path="main-process/native-ui/dialogs/open-file.js"></code></pre>

          <div class="demo-protip">
            <h2>友情提示</h2>
            <strong>OS X 中的表单样式</strong>
            <p> OSX 系统中提供了两中 dialog: 默认窗口和表单窗口.表单的样式依赖于 window 的样式，如果想自定义表单可以将<code>window</code> 作为第一个参数传给 dialog 模块的方法.</p>
            <pre><code class="language-js">const ipc = require('electron').ipcMain
const dialog = require('electron').dialog
const BrowserWindow = require('electron').BrowserWindow


ipc.on('open-file-dialog-sheet', function (event) {
  const window = BrowserWindow.fromWebContents(event.sender)
  const files = dialog.showOpenDialog(window, { properties: [ 'openFile' ]})
})</code></pre>
          </div>
        </div>
      </div>
    </div>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="error-dialog-demo-toggle" class="js-container-target demo-toggle-button">错误弹窗
          <div class="demo-meta u-avoid-clicks">支持: Win, OS X, Linux <span class="demo-meta-divider">|</span> 进程: Main</div>
        </button>
        <div class="demo-box">
          <div class="demo-controls">
            <button id="error-dialog" class="demo-button">点我看效果</button>
          </div>
          <p>在这个 🌰 中，使用了 <code>ipc</code> 模块来从渲染进程向主进程发起打开错误窗口的请求.</p>

          <p>你可以在系统 <code>ready</code> 之前就调用错误方法, 这可以用于展示系统启动过程中产生的错误.</p>
          <h5>渲染进程</h5>
          <pre><code data-path="renderer-process/native-ui/dialogs/error.js"></pre></code>
          <h5>主进程</h5>
          <pre><code data-path="main-process/native-ui/dialogs/error.js"></code></pre>
        </div>
      </div>
    </div>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="information-dialog-demo-toggle" class="js-container-target demo-toggle-button">信息弹窗
          <div class="demo-meta u-avoid-clicks">支持系统: Win, OS X, Linux <span class="demo-meta-divider">|</span> 进程: Main</div>
        </button>
        <div class="demo-box">
          <div class="demo-controls">
            <button class="demo-button" id="information-dialog">点我看效果</button>
            <span class="demo-response" id="info-selection"></span>
          </div>
          <p>在这个 🌰 中，使用了 <code>ipc</code> 模块来从渲染进程向主进程发起打开消息窗口的请求，可以将用户对消息的反馈返给渲染进程</p>

          <p>小提示: OSX 中不展示<code>title</code> 属性</p>

          <p>An information dialog can contain an icon, your choice of buttons, title and message.</p>
          <h5>渲染进程</h5>
          <pre><code data-path="renderer-process/native-ui/dialogs/information.js"></pre></code>
          <h5>主进程</h5>
          <pre><code data-path="main-process/native-ui/dialogs/information.js"></code></pre>
        </div>
      </div>
    </div>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="save-dialog-demo-toggle" class="js-container-target demo-toggle-button">保存弹窗
          <div class="demo-meta u-avoid-clicks">支持系统: Win, OS X, Linux <span class="demo-meta-divider">|</span> 进程: Main</div>
        </button>
        <div class="demo-box">
          <div class="demo-controls">
            <button class="demo-button" id="save-dialog">点我看效果</button>
            <span class="demo-response" id="file-saved"></span>
          </div>
          <p>在这个 🌰 中，使用了 <code>ipc</code> 模块来从渲染进程向主进程发起打开保存文件窗口的请求. 用户选择了文件以后，主进程会返给渲染进程</p>
          <h5>渲染进程</h5>
          <pre><code data-path="renderer-process/native-ui/dialogs/save.js"></pre></code>
          <h5>主进程</h5>
          <pre><code data-path="main-process/native-ui/dialogs/save.js"></code></pre>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      require('./renderer-process/native-ui/dialogs/open-file')
      require('./renderer-process/native-ui/dialogs/error')
      require('./renderer-process/native-ui/dialogs/information')
      require('./renderer-process/native-ui/dialogs/save')
    </script>

  </section>
</template>
